<script setup>
import {ref} from 'vue'
// import {test} from "../../../api/test/test.js";
// import {Calendar, Search} from '@element-plus/icons-vue'

const search_input = ref('')

const tableData = [
  {
    id: 1,
    login_name: 'Tom',
    operate_time: '2023-12-18 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 2,
    login_name: 'Tom',
    operate_time: '2023-12-19 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 3,
    login_name: 'Tom',
    operate_time: '2023-12-20 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 4,
    login_name: 'Tom',
    operate_time: '2023-12-21 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 5,
    login_name: 'Tom',
    operate_time: '2023-12-21 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 6,
    login_name: 'Tom',
    operate_time: '2023-12-22 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 7,
    login_name: 'Tom',
    operate_time: '2023-12-23 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 8,
    login_name: 'Tom',
    operate_time: '2023-12-24 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 9,
    login_name: 'Tom',
    operate_time: '2023-12-25 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 10,
    login_name: 'Tom',
    operate_time: '2023-12-26 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 11,
    login_name: 'Tom',
    operate_time: '2023-12-18 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 12,
    login_name: 'Tom',
    operate_time: '2023-12-19 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 13,
    login_name: 'Tom',
    operate_time: '2023-12-20 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 14,
    login_name: 'Tom',
    operate_time: '2023-12-21 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 15,
    login_name: 'Tom',
    operate_time: '2023-12-21 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 16,
    login_name: 'Tom',
    operate_time: '2023-12-22 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 17,
    login_name: 'Tom',
    operate_time: '2023-12-23 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 18,
    login_name: 'Tom',
    operate_time: '2023-12-24 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 19,
    login_name: 'Tom',
    operate_time: '2023-12-25 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  },
  {
    id: 20,
    login_name: 'Tom',
    operate_time: '2023-12-26 10:17:00',
    content: '增删改查',
    status: '成功',
    ip: '114.114.114.114',
    type: '操作'
  }
]
const dataRange = ref([])

const data = reactive({
  queryParams: {
    loginName: "",
    ip: "",
    content: "",
    status: "",
    type: ""
  }
})

const currentPage = ref(1)
const pageSize = ref(20)

const {queryParams} = toRefs(data)

function handleQuery() {
  // console.log('submit!')
  // console.log(data.queryParams.loginName)
  // data.queryParams.content = test(data.queryParams.loginName)
}

</script>

<template>
  <div class="app-container">

    <div>
      <el-form :model="queryParams" style="width: 100%; margin: 10px;">
        <el-row style="column-gap: 16px">
          <el-form-item class="search-short-line">
            <el-input v-model="queryParams.loginName" placeholder="登录名" clearable></el-input>
          </el-form-item>
          <el-form-item class="search-short-line">
            <el-input v-model="queryParams.ip" placeholder="IP地址" clearable></el-input>
          </el-form-item>
          <el-form-item class="search-short-line">
            <el-input v-model="queryParams.content" placeholder="日志内容" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
                class="search-short-line"
                v-model="queryParams.status"
                placeholder="状态"
                clearable>
              <el-option label="状态1"></el-option>
              <el-option label="状态2"></el-option>
              <el-option label="状态3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                class="search-short-line"
                v-model="queryParams.type"
                placeholder="类型"
                clearable>
              <el-option label="类型1"></el-option>
              <el-option label="类型2"></el-option>
              <el-option label="类型3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search-long-line">
            <el-date-picker
                v-model="dataRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <div style="display: flex; justify-content: space-between">
            <el-button
                style="width: 82px"
                color="#3951E3"
                type="primary"
                icon="Search"
                @click="handleQuery">
              搜索
            </el-button>
            <el-button
                style="width: 82px"
                icon="Refresh"
                @click="resetQuery">
              重置
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div style="margin-top: 14px">
      <el-table
          stripe
          :data="tableData"
          :default-sort="{prop:'id', order:'ascending'}"
          :header-cell-style="{'background': '#F5F7FA', 'height': '45px'}"
          :cell-style="{'height' : '45px'}"
          height="550px"
          table-layout="auto"
          style="width: 100%;margin: 10px">
        <el-table-column sortable fixed prop="id" label="记录号" width="100"/>
        <el-table-column prop="login_name" label="登录名" width="120"/>
        <el-table-column sortable prop="operate_time" label="操作时间" width="200"/>
        <el-table-column prop="content" label="内容"/>
        <el-table-column
            prop="status"
            label="状态"
            width="120"
            :filters="[
                  {text:'状态1', value:'status_1'},
                  {text:'状态2', value:'status_2'},
                  {text:'状态3', value:'status_3'}
                  ]"
        />
        <el-table-column prop="ip" label="IP" width="200"/>
        <el-table-column
            prop="type"
            label="类型"
            width="120"
            :filters="[
                  {text:'类型1', value:'type_1'},
                  {text:'类型2', value:'type_2'},
                  {text:'类型3', value:'type_3'}
                  ]"
        />
      </el-table>
    </div>
    <div style="margin-top: 14px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          style="display: flex; justify-content: right;"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next, jumper"
          :total="200"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<style scoped lang="scss">

:deep(.el-input__inner) {
  //text-align: center;
  //font-size: 14px;
  //font-family: "PingFang SC", serif;
}

.search-short-line {
  width: 320px;
}

.search-long-line {
  width: 480px;
}

</style>